<template>
  <view class="router-view">
    <uni-vertical-tab
      :height="tabHeight"
      :tab-title="tabTitles"
      :has-active-border="true"
      @change="onTabChange"
    >
      <view slot="content">
        <!-- 标签列表 -->
        <view v-for="(item, index) in realyClassifys" :key="index">
          <view class="container" v-show="index == currentIndex">
            <view
              class="mb-30"
              v-for="(sitem, sindex) in item._child"
              :key="sindex"
            >
              <!-- 二级分类名称 -->
              <view class="title fz-15 bold">{{
                sitem.name || sitem.title
              }}</view>

              <!-- 二级分类列表 -->
              <view class="uni-label-list mt-20">
                <view
                  class="uni-label pointer pointer-filter bcl-white"
                  :class="{ 'uni-label-selected': citem.selected }"
                  v-for="(citem, cindex) in sitem._child"
                  :key="cindex"
                  @tap="onLabelTap(citem)"
                >
                  <text class="hide-text-2">{{
                    citem.name || citem.title
                  }}</text>
                </view>
              </view>
            </view>

            <!-- 没有二级分类 -->
            <view v-if="!item._child">
              <view class="uni-label-list">
                <view
                  class="uni-label pointer pointer-filter bcl-white"
                  :class="{ 'uni-label-selected': item.selected }"
                  @tap="onLabelTap(item)"
                  >全部</view
                >
              </view>
            </view>
          </view>
        </view>
      </view>
    </uni-vertical-tab>

    <!-- 已选分类 -->
    <view
      class="uni-footer box box-column-center border border-top bcl-white"
      v-if="type == 2"
    >
      <view>已选分类</view>

      <!-- 已选列表 -->
      <view class="selected-list box-1 ml-10 mr-10">
        <text
          class="cl-second"
          v-for="(item, index) in selecteds"
          :key="index"
          >{{ item.title || item.name }}</text
        >
      </view>

      <!-- 确认按钮 -->
      <view>
        <button class="uni-button uni-button-unfill" @tap="submit">确认</button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import uniVerticalTab from "@/components/verticalTab";
import { listClassify } from "@/apis/app";

export default {
  data() {
    return {
      tabTitles: [],
      realyClassifys: [],

      currentIndex: 0, // 当前Tab的Index
      type: 1, // 1全部分类 2选择标签
    };
  },

  onLoad(options) {
    this.type = options.type || 1;
  },

  methods: {
    /*
     * 提交
     */
    submit() {
      this.selecteds.forEach((item) => {
        delete item.selected;
      });
      this.SET_CURRENT_CLASSIFYS(this.selecteds);
      uni.navigateBack();
    },

    /*
     * 高亮选中分类
     */
    lightClassify() {
      this.realyClassifys.forEach((item) => {
        // 一级分类
        if (this.currentClassifys.map((item) => item.id).includes(item.id))
          this.onLabelTap(item, false);

        if (item._child) {
          item._child.forEach((sitem) => {
            // 二级分类
            if (this.currentClassifys.map((item) => item.id).includes(sitem.id))
              this.onLabelTap(sitem, false);

            if (sitem._child) {
              sitem._child.forEach((citem) => {
                // 三级分类
                if (
                  this.currentClassifys
                    .map((item) => item.id)
                    .includes(citem.id)
                )
                  this.onLabelTap(citem, false);
              });
            }
          });
        }
      });
    },

    onLabelTap(item, navigateTo = true) {
      // 跳转
      if (this.type == 1 && navigateTo) {
        uni.navigateTo({
          url: `/task/taskClass?id=${item.id}&name=${item.title ||
            item.name}`,
        });
      } else {
        // 选择
        if (typeof item.selected == "undefined") {
          this.$set(item, "selected", true);
        } else {
          item.selected = !item.selected;
        }
      }
    },

    onTabChange(chunk) {
      this.currentIndex = chunk.index;
    },
    ...mapActions(["SET_CURRENT_CLASSIFYS"]),
  },

  watch: {
    classifys: {
      immediate: true,
      handler: function() {
        this.realyClassifys = JSON.parse(JSON.stringify(this.classifys));
        this.tabTitles = this.realyClassifys.map((item) => item.name);
        this.lightClassify();
      },
    },
  },

  computed: {
    selecteds() {
      let selecteds = [];

      this.realyClassifys.forEach((item) => {
        // 一级分类
        item.selected && selecteds.push(item);

        if (item._child) {
          item._child.forEach((sitem) => {
            // 二级分类
            sitem.selected && selecteds.push(sitem);

            if (sitem._child) {
              sitem._child.forEach((citem) => {
                // 三级分类
                citem.selected && selecteds.push(citem);
              });
            }
          });
        }
      });

      return selecteds;
    },

    tabHeight() {
      return this.type == 1 ? "100vh" : "calc(100vh - 100upx)";
    },

    ...mapState(["classifys", "currentClassifys"]),
  },

  components: {
    uniVerticalTab,
  },
};
</script>

<style lang="scss" scoped>
.router-view {
  .uni-label-list {
    &.first-classify {
      display: block;

      .uni-label {
        width: 100%;
      }
    }
  }

  .uni-footer {
    line-height: 1.5;
    padding: 0 20upx;

    .selected-list {
      white-space: nowrap;
      overflow-x: auto;

      text {
        &:not(:last-child) {
          &::after {
            content: "，";
          }
        }
      }
    }
  }
}
</style>
